<!DOCTYPE html>
<!-- 声明使用 HTML5 标准 -->
<html lang="zh-CN">
<head>
    <!-- 设置文档字符编码为 UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置视口，让页面在不同设备上正确显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置页面标题 -->
    <title>相对定位/固定定位/绝对定位示例</title>
    <style>
        /* 通用样式，设置容器和元素的基本样式 */
        body {
            height: 2000px; /* 增加页面高度，方便观察固定定位效果 */
            margin: 0;
            padding: 0;
        }

        .container {
            width: 80%;
            margin: 50px auto;
            border: 1px solid #ccc;
            padding: 20px;
            position: relative; /* 作为绝对定位元素的参考容器 */
        }

        /* 相对定位样式 */
        .relative-position {
            position: relative; /* 设置为相对定位 */
            width: 100px;
            height: 100px;
            background-color: lightblue;
            /* 相对于自身原来的位置，向右移动 50px，向下移动 20px */
            top: 20px;
            left: 50px;
        }

        /* 固定定位样式 */
        .fixed-position {
            position: fixed; /* 设置为固定定位 */
            width: 100px;
            height: 100px;
            background-color: lightgreen;
            /* 相对于浏览器视口，距离底部 20px，距离右侧 20px */
            bottom: 20px;
            right: 20px;
        }

        /* 绝对定位样式 */
        .absolute-position {
            position: absolute; /* 设置为绝对定位 */
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            /* 相对于最近的具有定位属性（非 static）的父元素，这里是 .container，距离顶部 30px，距离左侧 30px */
            top: 30px;
            left: 30px;
        }
    </style>
</head>
<body>
    <!-- 相对定位示例 -->
    <div class="container">
        <p>这是相对定位示例的容器。</p>
        <div class="relative-position">相对定位元素</div>
        <p>相对定位元素虽然位置发生了偏移，但仍会占据原来的空间。</p>
    </div>

    <!-- 固定定位示例 -->
    <div class="fixed-position">固定定位元素</div>
    <p>滚动页面，固定定位元素会始终保持在浏览器视口的指定位置。</p>

    <!-- 绝对定位示例 -->
    <div class="container">
        <p>这是绝对定位示例的容器。</p>
        <div class="absolute-position">绝对定位元素</div>
        <p>绝对定位元素会脱离文档流，不占据原来的空间，相对于最近的具有定位属性（非 static）的父元素进行定位。</p>
    </div>
</body>
</html>
